<template>
    <div id="scoreChart" :style="{ width: props.width, height: props.height }"></div>
</template>

<script setup lang="ts">
import { useScoreStore } from '@/stores';
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const props = defineProps<{ width: string, height: string }>()
onMounted(() => {
    try {
        drawChart()
    } catch (error) {
        console.error(error)
    }
});
async function drawChart() {
    await useScoreStore().init()
    const filteredScores = useScoreStore().score.filter(s => s.regular !== -1 && s.finalScore !== -1);
    const c = document.getElementById('scoreChart')
    if (!c) {
        console.error('元素不存在！')
        return
    }
    const chart = echarts.init(c);
    const option: echarts.EChartsOption = {
        title: {
            text: '成绩分布图'
        },
        legend: {
            data: ['成绩'],
            top: 'bottom'
        },
        radar: {
            indicator: filteredScores.map(item => ({
                name: item.name,
                max: 100
            })),
        },
        series: [
            {
                name: '成绩分布',
                type: 'radar',
                data: [
                    {
                        value: filteredScores.map(item => item.total),
                        name: '成绩',
                        label: {
                            show: true,
                            formatter: function (params: any) {
                                return params.value;
                            },
                            position: 'top'
                        }
                    }
                ]
            }
        ]
    };
    option && chart.setOption(option);
}
</script>